@import url('@/assets/fonts/font-awesome/font.min.css');
@import url('@/assets/fonts/bcc-iconfont/font.min.css');

@import 'tailwindcss';

@layer base {
  :root {
    --primary-color: rgb(0, 161, 214);
    --primary-text: rgb(233, 233, 233);
    --scroller-color: color-mix(
      in srgb,
      var(--primary-color) 60%,
      var(--block-color)
    );
  }
  .light {
    --content-color: #1a1a1a;
    --desc-color: #9e9e9e;
    --split-color: #e0e0e0;
    --block-color: #fafafa;
    --solid-block-color: #fafafa;
    --button-color: #00000009;
    --solid-button-color: #00000006;
  }
  .dark {
    --content-color: rgb(233, 233, 233);
    --desc-color: #a2a7ae;
    --split-color: #c4c4c433;
    --block-color: #ffffff0d;
    --solid-block-color: #24292e;
    --button-color: #a2a7ae18;
    --solid-button-color: #a2a7ae10;
  }
  html.light :is(button, input) {
    @apply hover:brightness-[.98];
  }
  html.dark :is(button, input) {
    @apply hover:brightness-150;
  }
  body {
    @apply overflow-hidden h-screen w-screen;
  }
  * {
    font-family:
      system-ui,
      -apple-system,
      BlinkMacSystemFont,
      'Segoe UI',
      Roboto,
      Oxygen,
      Ubuntu,
      Cantarell,
      'Open Sans',
      'Helvetica Neue',
      sans-serif;
    text-rendering: optimizeLegibility;
    @apply select-none box-border;
  }
  #app {
    @apply flex w-full h-full text-(--content-color);
  }
  #main {
    @apply flex flex-col relative w-full h-full overflow-hidden;
    &::before {
      @apply content-[''] absolute inset-0 bg-black/60 z-[1];
      @apply transition-opacity opacity-0 pointer-events-none;
    }
    &:has(.popup)::before {
      @apply opacity-100 pointer-events-auto;
    }
  }
  h1 {
    @apply text-2xl font-semibold;
  }
  button,
  input[type='text'],
  input[type='password'],
  input[type='number'] {
    @apply appearance-none outline-none leading-none h-8 rounded-lg text-sm px-2.5 py-1.5;
    @apply bg-(--button-color) transition-[filter];
  }
  button {
    @apply cursor-pointer;
  }
  a {
    @apply cursor-pointer text-(--primary-color);
  }
  hr {
    @apply border-none h-px my-4 bg-(--split-color) flex-shrink-0;
  }
  img {
    -webkit-user-drag: none;
  }
  ::-webkit-scrollbar {
    @apply w-1.5 h-1.5;
  }
  ::-webkit-scrollbar-thumb {
    @apply rounded-md bg-(--scroller-color);
  }
  ::-webkit-scrollbar-thumb:hover {
    @apply bg-(--primary-color);
  }
  ::selection {
    @apply bg-(--scroller-color);
  }
  i + span,
  span + i {
    @apply ml-2;
  }
}

@layer components {
  .page {
    @apply flex flex-col relative justify-center items-center w-full h-full;
    @apply px-6 overflow-hidden transition-opacity opacity-100;
    &.hide {
      @apply opacity-0;
    }
  }
  .desc {
    @apply text-sm text-(--desc-color) inline-block whitespace-pre-wrap shrink-0;
  }
  .text,
  .text * {
    user-select: text;
  }
  .primary-color {
    color: var(--primary-text);
    background-color: var(--primary-color);
  }
  .checkbox {
    @apply relative flex h-4 w-4 mr-4 items-center justify-center;
    input[type='checkbox'] {
      @apply absolute appearance-none h-4 w-4 rounded-sm outline-0;
      @apply border border-(--split-color);
      @apply bg-(--solid-button-color);
      @apply transition-colors;
    }
    i {
      @apply invisible z-10 pointer-events-none text-xs;
      @apply text-(--primary-text);
    }
    input[type='checkbox']:checked {
      @apply bg-(--primary-color);
      & + i {
        @apply visible;
      }
    }
  }
  .tab {
    @apply flex flex-col items-start gap-1;
    button {
      @apply pr-0 w-48 flex items-center justify-end gap-2 bg-transparent;
      @apply border-none hover:bg-(--solid-button-color);
      i {
        @apply w-4;
      }
      label {
        @apply w-[3px] rounded-md h-4 invisible shrink-0;
      }
      &.active {
        @apply bg-(--button-color) text-(--primary-color);
        label {
          @apply visible;
        }
      }
    }
  }
  i.question {
    @apply hover:cursor-pointer hover:brightness-85 text-(--desc-color);
  }
  .popup {
    @apply flex flex-col rounded-lg shadow-lg bg-(--solid-block-color);
    @apply absolute inset-0 m-auto w-fit! h-fit! gap-2 p-4 z-[2];
    .close {
      @apply absolute top-4 right-4 rounded-full w-8 h-8;
    }
  }
  .markdown {
    p {
      @apply text-(--desc-color) italic;
    }
    h3 {
      @apply mb-2 mt-4 font-bold text-lg;
    }
    li {
      @apply list-disc list-inside ml-4;
    }
  }
}

.Vue-Toastification__container {
  transform: translateY(10px) translateX(28px);
  .Vue-Toastification__toast {
    @apply flex items-center py-4 px-6;
  }
  .Vue-Toastification__toast-body {
    @apply text-sm whitespace-pre-wrap select-text;
  }
}

.dp__main {
  @apply w-40!;
  &.dp__theme_dark {
    --dp-border-color: var(--block-color) !important;
  }
  .dp__input {
    @apply text-sm! bg-(--block-color)! rounded-lg! h-8!;
  }
  .dp__menu {
    @apply text-sm!;
  }
  .dp--tp-wrap {
    @apply hidden;
  }
}
